<template>
	<view id="navel" class="page-container" :class="{'dark':theme=='dark'}">
		<view class="nav">
			<u-search @click="navigateToSearch()"  @custom="navigateToSearch" disabled=true font-size="28" placeholder="搜索" v-model="search.keyword"></u-search>
			<view>
				<view style="width: 200rpx;">
					<u-tabs bg-color="#00000000" font-size="24" :active-color="selectColor" gutter="0"
					 item-width="28" :list="classify.list" :is-scroll="false" :current="current" @change="change">
						
					</u-tabs>
				</view>
				
				<view class="classify" :style="{color: selectColor}">
					<text v-for="(item,  index) in classify.categorySelect" :key="index" @click="navigationToClassify(item.value)">
						{{item.text}}
					</text>
				</view>
				
			</view>
		</view>
		
		<!-- 推荐 -->
		<view class="watching">
			<view style="margin-left:30rpx">热门推荐</view>
			<view class="list">
				<view class="content" v-for="(item, index) in watchingHot" :key="item.book_id"
				  @click="navigateToChapter(item.book_id)">
					<view class="img">
						<image :src="item.book_cover" mode=""></image>
					</view>
					
					<view class="title">
						<view :style="{color: selectColor}">{{item.book_name}}</view>
						<view style="color: #999;">{{item.book_author}}</view>
					</view>
					
				</view>
			</view>
		</view>
		
		<!-- 默认展示 -->
		<view class="book_list">
			<view>
				<u-card margin="0" :body-style="{fontSize:'24rpx'}" show-head=false sub-title-size="22" :title="title" sub-title="热门列表" :thumb="thumb">
						<view class="" slot="body" v-for="(item, index) in bookList" :key="item.book_id"
						@click="navigateToChapter(item.book_id)">
							<view class="title">
								<text :style="{color: selectColor}" class="name">{{item.book_name}}</text>
								<text class="author">{{item.book_author}}</text>
							</view>
							<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
								<view class="u-body-item-title u-line-2">{{item.book_brief}}</view>
								<image :src="item.book_cover"></image>
								<!-- <u-lazy-load height="200" class="list_image" :image="item.book_cover" :loading-img="loadingImg" :error-img="errorImg"></u-lazy-load> -->
							</view>
							
							<!-- <view>
								<text>{{item.book_category2}}</text>·
								<text>{{item.book_wordCount}}字</text>·
								<text>{{item.score}}分</text>
							</view> -->
					
						</view>
						<!-- <view class="" slot="foot"><u-icon name="chat-fill" size="34" color="" label="30评论"></u-icon></view> -->
					</u-card>
			</view>
		</view>
		<u-gap height="20" bg-color="#f7f7f7"></u-gap>
		
		<!-- 推荐 -->
		<view class="watching">
			<view style="padding:10rpx 20rpx">大家都在看</view>
			<scroll-view style="white-space: nowrap;" class="list_bottom" scroll-x="true">
				<view class="content" style="display: inline-block;" v-for="(item, index) in areWatching" :key="item.book_id"
					@click="navigateToChapter(item.book_id)">
					<view class="img">
						<image :src="item.book_cover" mode=""></image>
					</view>
					
					<view class="title">
						<view :style="{color: selectColor}">{{item.book_name}}</view>
						<view style="color: #999;">{{item.book_author}}</view>
					</view>
					
				</view>
			</scroll-view>
		</view>
		
		<view style="color:#999">
			没有更多了...
		</view>
		
		
	</view>
</template>

<script>
	import { getAreWatching, getClassify } from '../../util/request/book.js'
	import store from '@/store/index.js'
	export default {
		data() {
			return {
				search: {
					keyword: ''
				},
				classify: {
					list: [{
						name: '男生',
					}, {
						name: '女生'
					}],
					
					/**
					 * 类别
					 */
					book_category: {
						0: [
							{ value: 888, text: "军事"},
							{ value: 16, text: "都市"},
							{ value: 5, text: "武侠"},
							{ value: 555, text: "悬疑"},
							{ value:17, text: "玄幻"},
							{ value:7, text: "其他"}
						],
						1: [
							
							{ value:2, text: "古言"},
							{ value:3, text: "现言"},
							{ value:7, text: "其他"},
						]
					},
					
					categorySelect: [{ value: 888, text: "军事"},
							{ value: 16, text: "都市"},
							{ value: 5, text: "武侠"},
							{ value: 555, text: "悬疑"},
							{ value:17, text: "玄幻"},
							{ value:7, text: "其他"}]
					
				},
				//推荐
				areWatching: [],
				watchingHot: [],
				
				bookList: [],
				loadingImg: '/static/loading.png',
				errorImg: '/static/loading.png',
				selectColor: "#2979ff",
				current: 0
			}
		},
		computed:{
			theme() {
				return store.state.novel.theme
				
			}
		},
		mounted() {
			this.loadAreWatching();
			this.loadClassify();
		},
		methods: {
			/**
			 * @description 切换 男生 女生
			 * @param {Object} index
			 */
			change(index) {
				console.log(index)
				if(index==1) this.selectColor = "#ff9900"
				else this.selectColor = "#2979ff"
				
				this.classify.categorySelect = this.classify.book_category[index]
				this.current = index;
				
				this.loadClassify(index);
			},
			
			/**
			 * type 类型 军事 现言  current 分类 男生 女生
			 * 跳转到分类
			 */
			navigationToClassify(type) {
				let sex = 15;
				if(this.current==1) sex = 1;
				uni.navigateTo({
					url: '/novel/classify/index?type='+type+'&current='+sex
				})
			},
			
			/**
			 * 到书本详情
			 */
			navigateToChapter(id) {
				// console.log(id)
				uni.navigateTo({
					url: "/novel/chapter/index?book_id="+id
				})
			},
			
			/**
			 * 到搜索
			 */
			navigateToSearch() {
				uni.navigateTo({
					url: "/novel/search/index"
				})
			},
			
			/**
			 * 推荐
			 */
			loadAreWatching() {
				let imei = "123456780"
				uni.getSystemInfo({
				    success: function (res) {
						imei = res.deviceId
						console.log('imei='+res.deviceId);
				    }
				});
				
				let that = this;
				getAreWatching({imei: imei}).then(res => {
					console.log(res)
					that.watchingHot = res.msg.splice(0, 3);
					that.areWatching = res.msg;
				}).catch(err=>{
					console.log("err",err)
				})
			},
			
			/**
			 * 获取默认列表
			 */
			loadClassify(book_category_id) {
				let that = this;
				let book_category2Id = 5
				if(book_category_id==1) book_category2Id = 2
				getClassify({ mtype: 0,
						book_category2Id,
						book_complete: 2,
						book_category_id: book_category_id || 15,
						pageNum: 1
						}).then(res=>{
					that.bookList = res.msg;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	#navel{
		padding:30rpx;
		font-size: 24rpx;
		
		.classify{
			display: flex;
			// justify-content: space-between;
			padding: 10rpx;
			
			text{
				margin-left:28rpx;
			}
			// border: 1rpx solid #dde;
		}
		
		.watching{
			font-size: 22rpx;
			background-color: #fff;
			padding:20rpx 0;
			margin-bottom: 16rpx;
			height: 380rpx;
			.list{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.content{
					width: 200rpx;
					padding:10rpx 20rpx;
					.img{
						image{
							width: 100%;
							height:220rpx;
						}
					}
				}
				
				.title{
					
				}
			}
			
			.list_bottom{
				display: flex;
				flex-direction: row;
				.content{
					width: 200rpx;
					padding:10rpx 20rpx;
					.img{
						image{
							width: 100%;
							height:220rpx;
						}
					}
				}
				
				.title{
					
				}
			}
			
			
		}
		
		.book_list{
			font-size: 22rpx;
			.list_image{
				width: 200rpx;
				height:200rpx;
			}
			.title{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				
				.author{
					color:#999;
				}
				
			
			}
		}
	}
	
	
	.u-card-wrap { 
			background-color: $u-bg-color;
			padding: 1px;
		}
		
		.u-body-item {
			color: #333;
			justify-content: space-between;
			padding: 20rpx 0rpx;
		}
			
		.u-body-item image {
			width: 120rpx;
			flex: 0 0 120rpx;
			height: 120rpx;
			border-radius: 8rpx;
			margin-left: 12rpx;
		}
</style>
